<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>表单输入绑定(v-model)</h3>

        <div id="app">
            <p> 用户名: <input type="text" v-model="username" placeholder="用户名"> </p>
            <p>
                <span>性别:</span>
                <input type="radio" v-model="gender" value="male" id="gender-male">
                <label for="gender-male">靓仔</label>
                <input type="radio" v-model="gender" value="female" id="gender-female">
                <label for="gender-female">靓妹</label>
            </p>
            <p>
                <span>爱好:</span>
                <input type="checkbox" v-model="hobby" value="eat" id="hobby-eat">
                <label for="hobby-eat">吃</label>
                <input type="checkbox" v-model="hobby" value="eatji" id="hobby-eatji">
                <label for="hobby-eatji">吃鸡</label>
                <input type="checkbox" v-model="hobby" value="sleep" id="hobby-sleep">
                <label for="hobby-sleep">睡觉</label>
                <input type="checkbox" v-model="hobby" value="video" id="hobby-video">
                <label for="hobby-video">刷视频</label>
            </p>
            <p>
                <span>省份:</span>
                <select v-model="province">
                    <option disabled >请选择省份</option>
                    <option>甘肃省</option>
                    <option>陕西省</option>
                    <option>山西省</option>
                </select>
            </option>
            <p> 介绍: <textarea v-model="description" placeholder="自我介绍"></textarea> </p>
            <p> 
                <input type="checkbox" v-model="exemption" id="exemption">
                <label for="exemption">十天内免登录 </label>
            </p>
            <hr>
            <ul>
                <li>用户名: {{ username }}</li>
                <li>性别: {{ gender }}</li>
                <li>爱好: {{ hobby }}</li>
                <li>省份: {{ province }}</li>
                <li>介绍: {{ description }}</li>
                <li>免登录: {{ exemption }}</li>
            </ul>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                // 为根组件指定 Data Property
                data(){
                    return {
                        username: '' ,
                        gender: 'female' ,
                        hobby: [ 'eat' ] ,
                        province: '陕西省' ,
                        description: '' ,
                        exemption: false
                    }
                }
            });
            const vm = app.mount( '#app' );
            console.log( vm );
        </script>

        
    </body>
</html>